import React from "react"
import { useDidShow, setClipboardData, openCustomerServiceChat } from "@tarojs/taro"
import { syncTabbarActive } from "@/utils/tabbar"
import { tabbarPages, pageMapperCommunity, PagePath, pageMapper } from "@/constants/pageMap"
import GpContainer from "@/components/GpContainer"
import TabbarPlaceholder from "../components/TabbarPlaceholder"
import { Image, View } from "@tarojs/components"
import { useLayout } from "@/utils/hooks"
import { ArrowDown, ArrowRight } from "@taroify/icons"
import Icon from "@/components/GpFontIcon"
import { useAppDispatch, useAppSelector } from "@/store/hook"
import { refreshUserInfo } from "@/store/actions/auth"
import { navigation } from "@/utils/router"
import styles from "./index.module.scss"
import { Gender } from "@/types/enum"
import { authActionHandler } from "@/utils/app"
import { Badge } from "@taroify/core"
import { withStore } from "@/store/index"

/**
 * @page 我的
 */
export default function Me() {
  const [layout] = useLayout()
  const userInfo = useAppSelector(state => state.auth.userInfo)
  const dispatch = useAppDispatch()
  useDidShow(() => {
    syncTabbarActive(tabbarPages.me)
    refreshInfo()
  })
  function refreshInfo() {
    dispatch(refreshUserInfo() as any)
  }
  function handleAuthBlockNavigation(path: PagePath, params?: INullable<Recordable>) {
    const fulfilled = () => navigation(path, params)
    authActionHandler(fulfilled, {
      mobile: true,
      avatarAndNickname: false
    })
  }
  /** 主要用于生产获取状态排查问题 */
  function handleTriggerDebug() {
    const __STATE__ = withStore().getState()
    setClipboardData({
      data: JSON.stringify({
        ...__STATE__,
        predicate: {
          willBeImplemented: decodeURIComponent(
            "%E6%9E%97%E6%AF%8D%E7%8B%97%E4%BD%A0%E5%A6%88%E7%9A%84%E4%B8%8D%E5%BE%97%E5%A5%BD%E6%AD%BB%2C%20%E7%8B%97%E4%B8%9C%E8%A5%BF%2C%20%E7%A5%9D%E4%BD%A0%E6%AD%BB%E6%97%A0%E8%91%AC%E8%BA%AB%E4%B9%8B%E5%9C%B0"
          )
        }
      })
    })
  }
  function handleContactService() {
    openCustomerServiceChat({
      extInfo: {
        url: process.env.__SERVICECHAT_URL__
      },
      corpId: process.env.__SERVICECHAT_CORPID__
    })
  }
  function renderNavigationBar() {
    return (
      <View className="box-border" onLongPress={handleTriggerDebug}>
        <View
          style={{
            height: layout.statusBarHeight + "px"
          }}
        ></View>
        <View
          style={{
            height: layout.navigationHeight + "px"
          }}
        ></View>
      </View>
    )
  }
  function renderUserGender() {
    if (userInfo.gender === Gender.Unknown) return null
    const genderSrc =
      userInfo.gender === Gender.Male
        ? "/images/yikao-community/male.png"
        : "/images/yikao-community/female.png"
    return <Image src={genderSrc} className="w-32px h-32px object-cover ml-8px" />
  }
  function renderPersonalInfo() {
    return (
      <View
        className={styles.personalInfo}
        onClick={() => handleAuthBlockNavigation(pageMapperCommunity.EditPersonalInfo, null)}
      >
        <Image
          src={userInfo.headImage || process.env.__DEF_AVATAR__}
          className={styles.personAvatar}
        />
        <View className={styles.personDesc}>
          <View className={styles.personName}>
            {userInfo.nickName}
            {renderUserGender()}
          </View>
          <View className={styles.personSubject}>
            {userInfo.areaName}-{userInfo.projectName}
            <ArrowDown color="#666666" size={10} className={styles.personSubjectArrow} />
          </View>
        </View>
        <View className={styles.personJump}>
          <ArrowRight color="#666666" size={20} />
        </View>
      </View>
    )
  }
  function renderPersonalList() {
    return (
      <View className={styles.personalList}>
        <View
          className={styles.personalListItem}
          onClick={() =>
            handleAuthBlockNavigation(pageMapperCommunity.PersonalPage, { id: userInfo.id })
          }
        >
          <View className={styles.personData}>{userInfo.noteCount}</View>
          <View className={styles.personDataLabel}>笔记</View>
        </View>
        <View
          className={styles.personalListItem}
          onClick={() => handleAuthBlockNavigation(pageMapperCommunity.MyConcern)}
        >
          <View className={styles.personData}>{userInfo.followingCount}</View>
          <View className={styles.personDataLabel}>关注</View>
        </View>
        <View
          className={styles.personalListItem}
          onClick={() => handleAuthBlockNavigation(pageMapperCommunity.MyFans)}
        >
          <View className={styles.personData}>{userInfo.followerCount}</View>
          <View className={styles.personDataLabel}>粉丝</View>
        </View>
        <View className={styles.personalListItem}>
          <View className={styles.personData}>
            {(userInfo.likeCount || 0) + (userInfo.collectingCount || 0)}
          </View>
          <View className={styles.personDataLabel}>获赞与收藏</View>
        </View>
      </View>
    )
  }
  function renderTopInfo() {
    return (
      <View className={styles.topInfo}>
        {renderNavigationBar()}
        {renderPersonalInfo()}
        {renderPersonalList()}
      </View>
    )
  }
  function renderJumpNavs() {
    return (
      <View className={styles.jumpNavsWrapper}>
        <View className={styles.jumpNavs}>
          <View
            className={styles.jumpNav}
            onClick={() =>
              handleAuthBlockNavigation(pageMapperCommunity.PersonalPage, { id: userInfo.id })
            }
          >
            <Image src="/images/yikao-community/mehome.png" className={styles.jumpNavImage} />
            <View className={styles.jumpNavText}>我的主页</View>
          </View>
          <View
            className={styles.jumpNav}
            onClick={() => handleAuthBlockNavigation(pageMapper.external)}
          >
            <Image src="/images/yikao-community/meconsult.png" className={styles.jumpNavImage} />
            <View className={styles.jumpNavText}>培训咨询</View>
          </View>
          <View
            className={styles.jumpNav}
            onClick={() => handleAuthBlockNavigation(pageMapperCommunity.MyReply)}
          >
            {userInfo.notificationCount ? (
              <Badge content={userInfo.notificationCount} max={99} className={styles.badge}>
                <Image
                  src="/images/yikao-community/mecomment.png"
                  className={styles.jumpNavImage}
                />
              </Badge>
            ) : (
              <Image src="/images/yikao-community/mecomment.png" className={styles.jumpNavImage} />
            )}
            <View className={styles.jumpNavText}>我的回复</View>
          </View>
          <View
            className={styles.jumpNav}
            onClick={() => handleAuthBlockNavigation(pageMapperCommunity.MyTopic)}
          >
            <Image src="/images/yikao-community/metopic.png" className={styles.jumpNavImage} />
            <View className={styles.jumpNavText}>我的话题</View>
          </View>
        </View>
      </View>
    )
  }
  function renderSettings() {
    return (
      <View className={styles.settings}>
        <View
          className={styles.setting}
          onClick={() => handleAuthBlockNavigation(pageMapperCommunity.EditPersonalInfo, null)}
        >
          <Icon icon="icon-huifu" size={32} color="#333333" />
          <View className={styles.settingText}>编辑资料</View>
          <ArrowRight className={styles.settingArrow} />
        </View>
        <View
          className={styles.setting}
          onClick={() => handleAuthBlockNavigation(pageMapperCommunity.AccountSetting, null)}
        >
          <Icon icon="icon-zhanghaoshezhi" size={32} color="#333333" />
          <View className={styles.settingText}>账号设置</View>
          <ArrowRight className={styles.settingArrow} />
        </View>
        <View className={styles.setting} onClick={handleContactService}>
          <Icon icon="icon-zaixiankefu" size={32} color="#333333" />
          <View className={styles.settingText}>在线客服</View>
          <ArrowRight className={styles.settingArrow} />
        </View>
        <View
          className={styles.setting}
          onClick={() =>
            navigation(pageMapper.external, {
              url: "https://mp.weixin.qq.com/s/BT9BAzUCmfi_GHQ3AZ_MJg"
            })
          }
        >
          <Icon icon="icon-jiarushequn" size={32} color="#333333" />
          <View className={styles.settingText}>加入社群</View>
          <ArrowRight className={styles.settingArrow} />
        </View>
        <View className={styles.setting}>
          <Icon icon="icon-guanyuwomen" size={32} color="#333333" />
          <View className={styles.settingText}>关于我们</View>
          <ArrowRight className={styles.settingArrow} />
        </View>
      </View>
    )
  }
  return (
    <GpContainer
      className="min-h-screen"
      shareConfig={{
        title: "个人中心"
      }}
    >
      <TabbarPlaceholder>
        <View className="bgBox bgBox2">
          {renderTopInfo()}
          {renderJumpNavs()}
          {renderSettings()}
        </View>
      </TabbarPlaceholder>
    </GpContainer>
  )
}
